CSS teksti orientatsioon: vertikaalse teksti haldamise meisterlikkus globaalses veebidisainis

Veebidisaini maailmas mängib tüpograafia olulist rolli informatsiooni edastamisel ja visuaalselt meeldivate paigutuste loomisel. Kuigi horisontaalne tekst on paljudes keeltes standard, muutub teksti orientatsiooni kontrollimine oluliseks, kui tegeletakse keeltega, mis traditsiooniliselt kasutavad vertikaalseid kirjasüsteeme, või kui luuakse unikaalseid disainielemente. CSS-i text-orientation omadus pakub võimsaid tööriistu selle kontrolli saavutamiseks, võimaldades arendajatel luua tõeliselt rahvusvahelistatud ja visuaalselt köitvaid veebikogemusi.

text-orientation omaduse mõistmine

CSS-i omadus text-orientation kontrollib tekstimärkide orientatsiooni rea sees. See mõjutab peamiselt vertikaalsetes kirjutamisrežiimides olevaid märke (nt kui seda kasutatakse koos writing-mode: vertical-rl või writing-mode: vertical-lr), kuid võib mõjutada ka horisontaalset teksti, eriti teatud väärtuste puhul.

Põhiväärtused

• mixed: See on algväärtus. See pöörab loomupäraselt horisontaalseid märke (nagu ladina tähed) 90° päripäeva. Loomupäraselt vertikaalsed märgid (nagu paljud CJK-märgid) jäävad püstiasendisse. See on sageli soovitud käitumine horisontaalse ja vertikaalse teksti segamisel.
• upright: See väärtus kuvab kõik märgid püstiasendis, sõltumata nende loomupärasest orientatsioonist. Horisontaalsed märgid renderdatakse nii, nagu oleksid nad horisontaalses kirjutamisrežiimis. See on kasulik, kui soovite sundida kõiki märke kuvama vertikaalselt ilma pööramata.
• sideways: See väärtus pöörab kõiki märke 90° päripäeva. See on funktsionaalselt sarnane väärtusega mixed ladina tähtede puhul, kuid see pöörab ka vertikaalseid märke. See on vananenud ja eelistatud on `sideways-right` ja `sideways-left`.
• sideways-right: Pöörab kõiki märke 90° päripäeva. See tagab ühtlase märkide orientatsiooni, mis võib olla oluline teatud disainiestiitika või ligipääsetavusnõuete puhul.
• sideways-left: Pöörab kõiki märke 90° vastupäeva.
• use-glyph-orientation: See väärtus on vananenud. Varem kasutati seda määramaks, et orientatsioon tuleks tuletada glüüfi sisseehitatud orientatsiooniinfost (tavaliselt SVG-fontides).

Praktilised näited: vertikaalse teksti rakendamine

text-orientation omaduse kasutamise illustreerimiseks vaatleme lihtsat näidet:

            
.vertical-text {
  writing-mode: vertical-rl; /* or vertical-lr */
  text-orientation: upright;
}

            

              
                Copy
              
            
          

See CSS-reegel renderdab klassiga vertical-text elemendi teksti vertikaalselt, kusjuures kõik märgid on püstiasendis. Kui muudame text-orientation väärtuseks mixed:

            
.vertical-text {
  writing-mode: vertical-rl;
  text-orientation: mixed;
}

            

              
                Copy
              
            
          

Ladina tähed pööratakse 90° päripäeva, samas kui vertikaalsed märgid jäävad püstiasendisse. Valik upright ja mixed vahel sõltub soovitud visuaalsest efektist ja tekstis olevate märkide segust.

Globaalsed kaalutlused ja keeletugi

text-orientation omadus on eriti oluline keelte puhul, mis traditsiooniliselt kasutavad vertikaalseid kirjasüsteeme, näiteks:

• Hiina keel: Kuigi kaasaegne hiina keel kasutab sageli horisontaalset teksti, kasutatakse vertikaalset kirjutamist endiselt mõnes kontekstis, näiteks traditsioonilistes raamatutes, siltidel ja kunstilistes kujundustes.
• Jaapani keel: Jaapani keelt saab kirjutada nii horisontaalselt kui ka vertikaalselt. Vertikaalne kirjutamine on tavaline romaanides, ajalehtedes ja mangades.
• Korea keel: Sarnaselt hiina ja jaapani keelele toetab ka korea keel nii horisontaalset kui ka vertikaalset kirjutamist.
• Mongoli keel: Traditsioonilist mongoli kirja kirjutatakse vertikaalselt.

Nende keelte jaoks disainides on ülioluline kasutada text-orientation omadust koos writing-mode omadusega, et tagada teksti korrektne ja loetav renderdamine. Valides upright ja mixed orientatsioonide vahel, arvestage kultuurilise konteksti ja sihtrühmaga.

Näiteks jaapani keeles kuvab text-orientation: upright koos writing-mode: vertical-rl kõik märgid vertikaalselt ilma pööramata, mis on sageli eelistatud stiil. text-orientation: mixed kasutamine pöörab ladina tähti, mis võib mõnes kujunduses sobida, kuid teistes mitte. Oluline on märkida ka CSS-i omadust direction, kuna see võib koos writing-mode'iga mõjutada renderdamise suunda.

Täpsemad tehnikad ja kasutusjuhud

Vertikaalsete navigeerimismenüüde loomine

Üks levinud kasutusjuht text-orientation jaoks on vertikaalsete navigeerimismenüüde loomine. Kombineerides writing-mode ja text-orientation, saate hõlpsasti luua visuaalselt silmatorkavaid menüüsid, mis eristuvad traditsioonilistest horisontaalsetest menüüdest.

            
<nav class="vertical-nav">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

            

              
                Copy
              
            
          

            
.vertical-nav {
  width: 50px; /* Adjust as needed */
}

.vertical-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.vertical-nav li a {
  display: block;
  padding: 10px;
  text-decoration: none;
  color: #333;
  writing-mode: vertical-rl;
  text-orientation: upright;
  transition: background-color 0.3s ease;
}

.vertical-nav li a:hover {
  background-color: #f0f0f0;
}

            

              
                Copy
              
            
          

See näide loob lihtsa vertikaalse navigeerimismenüü, mille lingid kuvatakse vertikaalselt. flex-direction: column tagab, et loendi elemendid on paigutatud vertikaalselt, ja text-orientation: upright hoiab teksti püstiasendis. Laiust, polsterdust ja värve saab kohandada vastavalt üldisele kujundusele.

Vertikaalne tekst pealkirjades

text-orientation omadust saab kasutada ka visuaalselt huvitavate pealkirjade loomiseks. Näiteks võite kasutada vertikaalset teksti külgribal või lehe dekoratiivse elemendina.

            
<div class="vertical-heading">
  <h1>Vertical Title</h1>
</div>

            

              
                Copy
              
            
          

            
.vertical-heading {
  writing-mode: vertical-rl;
  text-orientation: mixed; /* Or upright, depending on the desired effect */
  margin-bottom: 20px;
}

            

              
                Copy
              
            
          

See näide renderdab h1 elemendi vertikaalselt. Valik mixed ja upright vahel sõltub sellest, kas soovite ladina tähti pöörata.

Kombineerimine teiste CSS-i omadustega

text-orientation omadust saab kombineerida teiste CSS-i omadustega, et luua veelgi keerukamaid efekte. Näiteks saate kasutada transform: rotate(), et pöörata kogu vertikaalse tekstiplokki nurga all.

            
.rotated-vertical-text {
  writing-mode: vertical-rl;
  text-orientation: upright;
  transform: rotate(-90deg); /* Rotate counter-clockwise */
}

            

              
                Copy
              
            
          

See pöörab kogu vertikaalse tekstiplokki 90 kraadi vastupäeva. Katsetage erinevate pööramisnurkade ja teiste CSS-i omadustega, et saavutada unikaalseid ja visuaalselt meeldivaid kujundusi.

Ligipääsetavuse kaalutlused

text-orientation omaduse kasutamisel on ülioluline arvestada ligipääsetavusega. Veenduge, et tekst jääb loetavaks ja arusaadavaks kõikidele kasutajatele, sealhulgas puuetega inimestele. Siin on mõned peamised kaalutlused:

• Piisav kontrast: Veenduge, et teksti ja taustavärvi vahel on piisav kontrast. See on eriti oluline vertikaalse teksti puhul, kuna seda võib olla raskem lugeda kui horisontaalset teksti. Kontrastsussuhte kontrollimiseks kasutage tööriistu nagu WebAIM Contrast Checker.
• Fondi suurus: Kasutage sobivat fondi suurust, mis on kergesti loetav. Vältige liiga väikeste fondi suuruste kasutamist, eriti vertikaalse teksti puhul. Võimaldage kasutajatel vajadusel fondi suurust muuta.
• Rea kõrgus ja tähevahe: Loetavuse parandamiseks kohandage rea kõrgust (line-height) ja tähevahet (letter-spacing). Vertikaalne tekst võib nõuda erinevaid rea kõrguse ja tähevahe väärtusi kui horisontaalne tekst.
• Ekraanilugeja ühilduvus: Testige vertikaalset teksti ekraanilugejatega, et veenduda, et see on korrektselt ette loetud. Ekraanilugejad ei pruugi alati vertikaalse tekstiga õigesti toime tulla, seega on oluline kontrollida, et sisu on ligipääsetav.
• Klaviatuuriga navigeerimine: Veenduge, et klaviatuuriga navigeerimine töötab vertikaalse tekstiga korrektselt. Kasutajad peaksid saama sisus liikuda klaviatuuri abil ilma probleemideta.
• Kasutage semantilist HTML-i: Sisu struktureerimiseks kasutage sobivaid semantilisi HTML-elemente. See aitab ekraanilugejatel sisu mõista ja pakub paremat kasutajakogemust. Näiteks kasutage <nav> navigeerimismenüüde jaoks ja <article> põhisisu jaotiste jaoks.

Veebilehitsejateülene ühilduvus

text-orientation omadusel on tänapäevastes veebilehitsejates hea ühilduvus. Siiski on alati hea mõte testida oma kujundusi erinevates brauserites, et veenduda nende korrektses renderdamises. Kaaluge brauseri prefiksite kasutamist (kuigi tänapäeval pole see enamasti vajalik), kui peate toetama vanemaid brausereid.

Siin on üldine ülevaade brauseritoest:

• Chrome: Toetatud.
• Firefox: Toetatud.
• Safari: Toetatud.
• Edge: Toetatud.
• Internet Explorer: Osaline tugi, täieliku funktsionaalsuse tagamiseks võib vajada prefikseid või polüfille. Kaaluge vertikaalse teksti vältimist IE vanemates versioonides.

Kasutage tööriistu nagu Can I Use (caniuse.com), et kontrollida uusimat brauserite ühilduvuse teavet text-orientation ja teiste CSS-i omaduste kohta.

Parimad praktikad text-orientation kasutamiseks

• Kasutage koos writing-mode'iga: Kasutage alati text-orientation omadust koos writing-mode omadusega, et tagada teksti korrektne renderdamine.
• Arvestage keele ja kultuuriga: Valides upright ja mixed vahel, võtke arvesse keelelist ja kultuurilist konteksti.
• Testige ligipääsetavust: Testige alati oma kujundusi ligipääsetavuse osas, et tagada nende kasutatavus kõikidele kasutajatele.
• Säilitage loetavus: Veenduge, et tekst jääb loetavaks ja kergesti mõistetavaks ka siis, kui see on renderdatud vertikaalselt.
• Kasutage säästlikult: Kasutage vertikaalset teksti säästlikult ja strateegiliselt, et parandada oma kujunduste visuaalset atraktiivsust. Vertikaalse teksti liigne kasutamine võib muuta sisu raskesti loetavaks ja kahjustada üldist kasutajakogemust.

Kokkuvõte

text-orientation omadus on võimas tööriist teksti orientatsiooni kontrollimiseks veebidisainis. Mõistes selle erinevaid väärtusi ja kuidas seda koos writing-mode omadusega kasutada, saate luua visuaalselt meeldivaid ja rahvusvahelistatud veebikogemusi, mis sobivad erinevatele keeltele ja disainistiilidele. Ärge unustage arvestada ligipääsetavuse ja veebilehitsejateülese ühilduvusega, et tagada oma kujunduste kasutatavus kõikidele kasutajatele.

Valdades CSS-iga vertikaalse teksti kontrollimise kunsti, avate uusi võimalusi loominguliseks ja köitvaks veebidisainiks, mis aitab teie veebisaitidel globaalses digitaalses maastikus silma paista.